<template>
    <div class="detail">
        <div class='top'>
            <h3 v-if="detail.out_status == 3">退货申请审核中</h3>
            <h3 v-if="detail.out_status == 1">退货申请审核通过，请尽快发货</h3>
            <h3 v-if="detail.out_status == 2">退货申请被拒绝,原因：{{ detail.reason }}</h3>
            <h3 v-if="detail.out_status == 4">已发货，等待商家确认退货</h3>
            <h3 v-if="detail.out_status == 5">退货已完成</h3>
        </div>
        <van-card 
            :price="detail.pice" 
            :title="detail.title"
            :desc="detail.name" 
            :thumb="detail.url" 
            :num="detail.out_num"
        >
        </van-card>
        <div class="item">
            <van-cell title="退款总金额:" :value="'￥' + (detail.pice * detail.out_num)" />
        </div>
        <div class="item">
            <van-cell title="退货原因:" :label="reason" />
        </div>
        <div class="item">
            <van-cell title="退货数量:" :value="num" />
        </div>
        <div class="item">
            <h5>上传图片(最多三张)</h5>
            <div class="img-wrapper">
               <van-image @click="bigImgShow(item)" v-for="item in imgArr" width="100" height="100" fit='scale-down' :src="item.url" :key="item.id" />
            </div>
        </div>
        <van-image-preview v-model="imgshow" :images="images"></van-image-preview>
        <div class="item" v-if="detail.out_status == 1 && !detail.num">
            <div class="form">
                <span>选择快递公司</span>
                <select name="" id="" v-model="com">
                    <option value="">请选择</option>
                    <option value="yunda">韵达快递</option>
                    <option value="youzhengguonei">邮政快递包裹</option>
                    <option value="zhongtong">中通快递</option>
                    <option value="yuantong">圆通速递</option>
                    <option value="shunfeng">顺丰速运</option>
                    <option value="huitongkuaidi">百世快递</option>
                    <option value="shentong">申通快递</option>
                    <option value="jd">京东物流</option>
                    <option value="ems">EMS</option>
                    <option value="tiantian">天天快递</option>
                    <option value="debangwuliu">德邦</option>
                    <option value="zhaijisong">宅急送</option>
                    <option value="youshuwuliu">优速快递</option>
                    <option value="debangkuaidi">德邦快递</option>
                    <option value="baishiwuliu">百世快运</option>
                    <option value="pjbest">品骏快递</option>
                    <option value="transrush">TransRush</option>
                    <option value="dhl">DHL-中国件</option>
                    <option value="zhongtongkuaiyun">中通快运</option>
                    <option value="annengwuliu">安能快运</option>
                    <option value="suer">速尔快递</option>
                    <option value="suning">苏宁物流</option>
                    <option value="yundakuaiyun">韵达快运</option>
                    <option value="adapost">安达速递</option>
                </select>
            </div>
        </div>
        <div class="item" v-if="detail.out_status == 1 && !detail.num">
            <van-field v-model="logisNum" label="快递单号" placeholder="请输入快递单号" />
        </div>
        <div class="btn" v-if="detail.out_status == 1 && !detail.num">
            <van-button :loading='loading' type="primary" size="large" @click="submit">发货</van-button>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data(){
        return{
            detail: {},
            reason: '',
            num: '',
            imgArr: [],
            com:'',//快递公司
            logisNum:null,//快递单号
            loading:false,
            imgshow:false,//大图弹窗
            images:[],//大图
        }
    },
    computed: {
        ...mapState(['openid', 'userState']),
        imgArrId() {
            let arr = this.imgArr.map(item => {
                return item.id
            })
            return arr.toString()
        }
    },
    mounted(){
        this._get()
    },
    methods:{
        //点击查看大图
        bigImgShow(e){
            
            this.images = []
            this.images = [e.url]
            console.log('查看大图',this.images)
            this.imgshow = true
        },
        //发货
        submit(){
            this.$dialog.confirm({
                title: '提示',
                message: '确认发货吗？',
            })
            .then(() => {
                this._submit()
            })
            .catch(() => {
                // on cancel
            });
        },
        async _submit(){
            let form = {
                order: this.$route.params.id,
                com: this.com,
                num: this.logisNum,
                id: this.$route.params.goodid,
                openid: this.openid
            }
            this.loading = true
            let { data: { code, data } } = await this.$http.post(this.$api.merchantOrdinary,form)
            this.loading = false
            if (code === 0) {
                this.$toast(data)
                setTimeout(() => {
                    this.$router.go(-1)
                }, 1500)
            }
        },
        //获取列表
        async _get() {
            let form = {
                order: this.$route.params.id,
                id: this.$route.params.mid,
                openid: this.openid
            }
            let { data: { code, data } } = await this.$http.get(this.$api.merchantGoods,form)
            if(code === 0) {
                data.items[0].imgArr = data.pic.map((item) => {
                    return item[0]
                })
                this.detail = data.items[0]
                this.reason = this.detail.out_reason
                this.num = this.detail.out_num
                this.imgArr = this.detail.imgArr
                if(this.detail.num) {
                    this.getLogistics(this.detail.com, this.detail.num)
                }
            }
        },
        async getLogistics(com, num) {
            let form = {
                com,
                num
            }
            let { data: { code, data } } = await this.$http.get(this.$api.platformExpre,form)
            if(code === 0) {
                if (Array.isArray(data)) {
                    let logisArr = data[0].data.map(item => {
                        item.day = item.time.substring(5, 10)
                        item.time = item.time.substring(11, 16)
                        return item
                    })
                    this.logis = {
                        com: data[0].com,
                        num: data[0].nu,
                        logisArr
                    }
                } else {
                    this.logis = data
                }
            }
        },
    }
}
</script>
<style lang="scss" scoped>
    .detail{
        .top {
            text-align: center;
            margin-bottom: 1rem;
            padding: 2.5rem 0;
            background: orange;
            color: #fff;
            h3 {
                font-size: 18px;
            }
            h5 {
                font-size: 16px;
            }
        }
        .item{
           border-top: 1px solid #f0f0f0;
           background-color: #fff;
           h5{
               font-size: 14px;
               padding: 1rem;
           }
           .img-wrapper{
               padding: 1rem;
               .van-image{
                   border: 1px solid #f0f0f0;
               }
           }
           .form{
                display: flex;
                padding: 1rem;
                background: #fff;
                font-size: 14px;
                span{
                    display: block;
                    flex: 0 0 10rem;
                    width: 2rem;
                    margin-right: .4rem;
                }
                select{
                    padding: 0;
                    background: #fff;
                    border: 0;
                }
                input,select{
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    display: block;
                    font-size: 14px;
                }
           }
        }
        .btn{
            margin: 2rem 0;
        }
    }
</style>